<template>
	<!-- 图书详情页 -->
	<div class="book-detail">
		<!-- 上半部分 图书概况 -->
		<div class="book-detail-top">
			<!-- 图片 -->
			<div class="book-detail-top-img">
				<img :src="baseURL+book.bigImgUrl" style="width: 100%;">
			</div>
			<!-- 图书信息 -->
			<div class="book-detail-top-content">
				<!-- 标题 -->
				<div class="book-title">
					<h3>{{ book.title }}</h3>
				</div>
				<!-- 概括 -->
				<div class="book-summary">
					<span>{{ book.slogan }}</span>
				</div>
				<!-- 相关信息 -->
				<div class="book-info">
					<span author>作者：{{ book.author }}</span>
					<span bookConcern>出版社：{{ book.bookConcern }}</span>
					<span publishDate>出版日期： {{ book.publishDate }}</span>
				</div>
				<!-- 价格 -->
				<div class="book-price">
					<span price>￥{{ book.price | realPrice(book.discount) }} </span>
					<span origin-price>￥{{ book.price | realPrice()}}</span>
					<span discount>[ {{ book.discount*10 }}折 ]</span>
				</div>
				<!-- 计数器,加入购物车按钮 -->
				<div class="book-option">
					<div>
						<el-input-number v-model="num" style="display: block;" :min="1"></el-input-number>
					</div>
					<div button>
						<el-button type="primary" @click="check_shop">加入购物车</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 下半部分 -->
		<BookTabs :comments="comments" :book="book"></BookTabs>
	</div>
</template>

<script>
	import {mapMutations} from 'vuex'
	import BookTabs from '../components/BookTabs.vue'
	
	export default {
		data() {
			return {
				baseURL: 'http://111.229.37.167/',
				book: [],
				comments: [],
				num: 1,
				select: '图书介绍'
			}
		},
		methods: {
			check_shop() {
				// 判断当前是否登录
				if (this.$store.state.logreg.active_user){
					
				}else{
					alert('请先登录!')
					return
				}
				// 获取购物车内已有的商品id
				let ids = [];
				for (let i of this.$store.state.cart.shop_cart[this.$store.state.logreg.active_user]){
					ids.push(i.id)
				}
				// 检测购物车内是否已有该商品
				let have = ids.indexOf(this.book.id);
				// 如果没有就直接加入
				if (have == -1){
					this.add_shop({
						id: this.book.id,
						img: this.baseURL+this.book.bigImgUrl,
						title: this.book.title,
						num: this.num,
						price: this.$realPrice(this.book.price,this.book.discount),
						username: this.$store.state.logreg.active_user
					})
					this.$message({
						message: '添加成功',
						center: true,
						duration: 3000
					})
				}
				// 如果有就跳转到购物车页面
				else{
					this.$message({
						type: 'warning',
						message: '已在购物车内，请勿重复添加！',
						center: true,
						duration: 3000
					})
				}
			},
			...mapMutations('cart',[
				'add_shop'
			])
		},
		filters: {
			
		},
		created() {
			
			// 图书信息
			this.axios.get('/book/'+this.$route.params.id)
			.then((response) => {
				if (response.status >= 200 & response.status <= 300){
					this.book = response.data;
					
					
					window.document.title = this.book.title;
				}else{
					console.log(response.status)
				}
			})
			.catch((err) => {
				console.log('图书详情页请求失败！')
			})
			// 评论
			this.axios.get('/book/'+this.$route.params.id+'/comment')
			.then((response) => {
				if (response.status >= 200 & response.status <= 300){
					this.comments = response.data;
				}else{
					console.log(response.status)
				}
			})
			.catch((err) => {
				console.log('图书详情页请求失败！')
			})
		},
		components: {
			BookTabs
		}
	}
</script>

<style lang="less">
	// 上半部分
	.book-detail-top {
		width: 100%;
		overflow: hidden;
	}
	.book-detail-top-content{
		position: relative;
		float: left;
		width: 75%;
	}
	.book-detail-top-img {
		float: left;
		width: 25%;
	}
	.book-title {
		padding-left: 4%;
		padding-top: 5%;
	}
	.book-summary {
		text-align: left;
		padding: 3% 4%;
	}
	.book-info {
		display: flex;
		justify-content: space-between;
		padding-left: 4%;
		padding-right: 30%;
	}
	.book-price {
		text-align: left;
		padding-top: 6%;
		padding-left: 4%;
		
		[price] {
			font-size: 2.5rem;
			color: red;
		}
		[origin-price] {
			text-decoration: line-through;
			font-size: 1rem;
			position: relative;
			top: -6px;
			left: 5px;
			opacity: .6;
		}
		[discount] {
			position: relative;
			bottom: 3px;
			padding-left: 3%;
		}
	}
	.book-option {
		height: 40px;
		position: absolute;
		right: 30%;
		bottom: 3%;
		
		[button] {
			position: relative;
			left: 110%;
			bottom: 100%;
		}
	}
	
	//单选按钮
	.el-radio-group {
		width: 100%;
		
		label {
		width: 33.3%;
		
			span {
				width: 100%;
			}
		}
	}
</style>
